<template>
 <div>
   <!-- 面包屑导航区 -->
   <el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>后勤服务</el-breadcrumb-item>
     <el-breadcrumb-item>报修列表</el-breadcrumb-item>
   </el-breadcrumb>

   <!-- 卡片视图区 -->
   <el-card>
     <!-- 搜索与添加区域-->
     <el-row :gutter="10">
       <el-col :span="5">
         <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="getRepairListLimit" >
           <el-select placeholder="请选择" v-model="queryInfo.select" slot="prepend"
                      clearable
                      @clear="getRepairListLimit"
                      style="width: 100px;">
             <el-option
               v-for="item in buildingList"
               :key="item.buildingId"
               :label="item.buildingNumber"
               :value="item.buildingId">
             </el-option>
           </el-select>
         </el-input>
       </el-col>
       <el-col :span="10">
         <el-date-picker
           v-model="queryInfo.startData"
           type="date"
           value-format="yyyy-MM-dd"
           placeholder="选择日期">
         </el-date-picker>
         <span>至</span>
         <el-date-picker
           v-model="queryInfo.endData"
           type="date"
           value-format="yyyy-MM-dd"
           placeholder="选择日期">
         </el-date-picker>
       </el-col>
       <el-col :span="5">
         <el-button type="warning" class="el-icon-search" @click="getRepairListLimit">搜索</el-button>
       </el-col>
     </el-row>

     <!-- 报修列表主体区域 -->
     <el-table :data="repairList" border stripe>
       <el-table-column align="center" type="index" label="#"></el-table-column>
       <el-table-column align="center" label="申报寝室">
         <template slot-scope="scope">
           {{scope.row.dormitory.building.buildingNumber}}-{{scope.row.dormitory.dormitoryRoom}}
         </template>
       </el-table-column>
       <el-table-column align="center" prop="repairTime" label="申报日期"></el-table-column>
       <el-table-column align="center" prop="processingTime" label="解决日期"></el-table-column>
       <el-table-column align="center" prop="repairReason" label="申报原因"></el-table-column>
       <el-table-column align="center" label="操作" width="170px">
         <template slot-scope="scope">
           <!-- 处理按钮 -->
           <el-button type="primary" size="mini" icon="el-icon-edit" :disabled="scope.row.repairIsProcessing === 0 ? false : true" @click="showRepairDialog(scope.row)" >{{scope.row.repairIsProcessing === 0 ? '未处理' : '已处理'}}</el-button>
           <!-- 删除按钮 -->
           <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteRepair(scope.row.repairId)" ></el-button>
         </template>
       </el-table-column>
     </el-table>

     <!-- 分页区域 -->
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="queryInfo.pageNum"
       :page-sizes="[10, 20, 30, 50]"
       :page-size="queryInfo.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total">
     </el-pagination>

     <!-- 报修日期对话框 -->
     <el-dialog
       title="报修解决"
       :visible.sync="repairDialogVisible"
       width="50%"
       @close="repairDialogClosed">
       <!-- 主题区域 -->
       <el-form :model="repairForm" :rules="repairFormRules" ref="repairFormRef" label-width="100px">
         <el-form-item label="专业名称" prop="processingTime">
           <el-date-picker
             v-model="repairForm.processingTime"
             type="date"
             value-format="yyyy-MM-dd"
             placeholder="选择日期">
           </el-date-picker>
         </el-form-item>
       </el-form>
       <!-- 底部区域 -->
       <span slot="footer" class="dialog-footer">
            <el-button @click="repairDialogVisible = false" >取 消</el-button>
            <el-button type="primary" @click="updateProcessingTime">确 定</el-button>
          </span>
     </el-dialog>

   </el-card>

 </div>
</template>

<script>
    export default {
        data() {
          return {
            queryInfo: {
              query: '',
              select: '',
              startData: '',
              endData: '',
              pageNum: 1,
              pageSize: 10
            },
            total: 0,
            buildingList: [],
            repairList: [],
            repairDialogVisible: false,
            repairForm: {
              repairId: '',
              processingTime: ''
            },
            repairFormRules: {
              processingTime: [
                {required: true, message: '请选择日期', trigger: 'blur'}
              ]
            }
          }
        },

      created() {
          this.getRepairListLimit();
      },

      methods: {
          /*分页模糊查询*/
        async getRepairListLimit(){
          const {data: res} = await this.$axios.get(this.$http+'/repairManageController/getRepairListLimit',{
            params: this.queryInfo
          })
          this.buildingList = res.datas.buildingList;
          this.repairList = res.datas.repairList;
          this.total = res.datas.total;
        },

        showRepairDialog(row) {
          this.repairForm.repairId = row.repairId;
          this.repairDialogVisible = true
        },

        /* 提交更新数据 */
        updateProcessingTime() {
          this.$axios.put(this.$http+'/repairManageController/updateProcessingTime/'+this.repairForm.repairId+'/'+this.repairForm.processingTime).then(res => {
            this.repairDialogVisible = false;
            this.getRepairListLimit();
            if (res.data.code === 100)
              return this.$message.error("处理错误");
            return this.$message.success("已解决")
          }).catch(err => {
            this.$message.error("后台错误"+err)
          })
        },

        /* 删除 */
        async deleteRepair(repairId) {
          const confirmResult = await this.$confirm('是否删除?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err);
          if (confirmResult !== 'confirm')
            return this.$message.info('已取消删除');
          this.$axios.delete(this.$http+'/repairManageController/deleteRepair/'+repairId).then(res => {
            this.getRepairListLimit();
            if (res.data.code === 100)
              this.$message.error("删除失败");
            this.$message.success("删除成功");
          }).catch(err => {
            this.$message.error("后台异常" + err)
          })
        },

        /* 监听 pageSize 改变的事件 */
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          //每次改变之后，重新获取数据
          this.getRepairListLimit();
        },

        /* 监听 pageNum 改变的事件 */
        handleCurrentChange(newPage) {
          this.queryInfo.pageNum = newPage ;
          //每次改变之后，重新获取数据
          this.getRepairListLimit();
        },

        /* 监听编辑对话框的关闭， 对其进行清空 */
        repairDialogClosed() {
            this.$refs.repairFormRef.resetFields();
        },

      }
    }
</script>

<style scoped>

</style>
